<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学期:</span>
        <select class="select" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option></option>
        </select>
        <el-button type="primary" size="small">确认</el-button>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.JIAOSHXINXIIGUANLI2X" class="pink">
    	<span class="title">个人积分</span>
    	<div class="kong"></div>
  		<el-table :data="tablemsg" style="width: 100%">
  			<el-table-column prop="id" label="#" align="center"></el-table-column>
  			<el-table-column prop="xueqi" label="学期" align="center" min-width='180'></el-table-column>
  			<el-table-column prop="yuefen" label="月份" align="center"></el-table-column>
  			<el-table-column prop="xqjifen" label="学期积分" align="center"></el-table-column>
  			<el-table-column prop="ydjifen" label="月度积分" align="center"></el-table-column>
  			<el-table-column prop="ydpaihang" label="月度排行" align="center"></el-table-column>
  			<el-table-column label="操作" align="center">
  				<template scope="scope">
  					<el-button size="small">查看详情</el-button>
  				</template>
  			</el-table-column>
  		</el-table>
    </div>

    <div class="model detail">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
    	<span class="title">积分详情</span>
    	<div class="kong"></div>
    	<el-table :data="tablemsg2" style="width: 100%">
    		<el-table-column prop="id" label="#" align="center"></el-table-column>
    			<el-table-column prop="type" label="评分类别" align="center"></el-table-column>
    			<el-table-column prop="fraction" label="分数" align="center"></el-table-column>
    			<el-table-column prop="neir" label="评价内容" align="center"></el-table-column>
    			<el-table-column prop="raters" label="评分人" align="center"></el-table-column>
    			<el-table-column prop="time" label="评分时间" align="center"></el-table-column>
    	</el-table>
    </div>

  </section>
</template>

<script>
export default {
  data () {
    return {
      checked: false,
      upShow: false,
      isSuccess: false,
      num1: '3',
      tablemsg: [
        {
          id: '1',
          xueqi: '2015-2016学年上学期',
          yuefen: '3',
          xqjifen: '241',
          ydjifen: '+23',
          ydpaihang: '3'
        },
        {
          id: '1',
          xueqi: '2015-2016学年上学期',
          yuefen: '3',
          xqjifen: '241',
          ydjifen: '+23',
          ydpaihang: '3'
        },
        {
          id: '1',
          xueqi: '2015-2016学年上学期',
          yuefen: '3',
          xqjifen: '241',
          ydjifen: '+23',
          ydpaihang: '3'
        }
      ],
      tablemsg2: [
        {
          id: '1',
          type: '资料上传',
          fraction: '+1',
          neir: '资料没有按时上传',
          raters: '欧阳俊逸',
          time: '2016/03/23 12:23:34'
        },
        {
          id: '2',
          type: '资料上传',
          fraction: '+1',
          neir: '资料没有按时上传',
          raters: '欧阳俊逸',
          time: '2016/03/23 12:23:34'
        },
        {
          id: '3',
          type: '资料上传',
          fraction: '+1',
          neir: '资料没有按时上传',
          raters: '欧阳俊逸',
          time: '2016/03/23 12:23:34'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    handleClick () {
      console.log('1')
    },
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
    },
    haha () {
      alert('haha')
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .select{
        width: 18%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        margin-right: 2%;
      }
      .right{
        width: 10%;
        float: right;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
  }
  .icon{
    position: absolute;
    left: 24px;
    top: -25px;
  }

  .close{
    position: absolute;
    right: 2%;
  }
  .modal-backdrop{
    background: #000;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: .5;
  }
  
</style>
